<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
        1、如果传递的参数是变化的怎么办：前端动态创建script 标签 
        2、后端返回的变量如果污染了前端的变量怎么办：后端返还个函数
        3、请求服务器是需要时间的，异步问题如何处理？回调函数
    -->
    <button id="btn">点击获取跨域资源</button>
  </body>
  <script>
    let button = document.getElementById('btn');
    button.addEventListener('click', () => {
      let myScript = document.createElement('script');
      myScript.src = 'http://localhost:4000/getAjax?name=1&cb=cbfunc';
      document.querySelector('head').appendChild(myScript);
    });
    const cbfunc = (res) => {
      // 前端会自动解析
      console.log(res);
    };
  </script>
</html>
